<template>
  <div class="container">
    <div class="left">
      <div class="menu-header">
        <div class="menu-img">
          <div class="menu-logo">
            <img src="@assets/menu/logo.png" alt="" />
          </div>
          <div class="menu-ai">
            <img src="@assets/menu/AI.png" alt="" />
          </div>
        </div>
        <div class="menu-list">
          <div
            class="menu-item"
            v-for="item in menuList"
            :key="item.id"
            @click="btn(item)"
            :class="{ active: currentIndex == item.id }"
          >
            <img :src="item.image" alt="" />
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
      <!-- 登录状态 -->
      <div v-if="userStore.userState" class="login">
        <div class="login-btn" @click="isShow = true">
          <img :src="userStore.userInfo.logo" alt="" />
          <span>{{ userStore.userInfo.nickName }}</span>
        </div>
        <div v-show="isShow" class="loginList">
          <div class="setting" @click="userConfig">账号设置</div>
          <div class="exit" @click="loginOut">退出登录</div>
        </div>
      </div>
      <!-- 未登录状态 -->
      <div class="login" v-else>
        <div class="login-btn" @click="login">
          <img src="@img/login/p.png" alt="" />
          <span>登录</span>
        </div>
      </div>
    </div>
    <div class="right">
      <RouterView />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import useLogin from '@hooks/useLogin'
import img1 from '@/assets/menu/dialogue.png'
import img2 from '@/assets/menu/interview.png'
import img3 from '@/assets/menu/programmer.png'
import { useRouter } from 'vue-router'
import { useUserStore } from '@stores/useUserStore'
import { getCurrentInstance, ComponentInternalInstance } from 'vue'
import { useChatStore } from '@stores/useChatStore'
import { chatList, IChatListItem } from '@api/chat'

const menuList = ref([
  { id: '1', image: img1, text: '智能对话', label: '/chat' },
  { id: '2', image: img2, text: '模拟面试', label: '/chat' },
  { id: '3', image: img3, text: '程序员', label: '/programmer' }
])
let router = useRouter()
let userStore = useUserStore()
let { proxy } = getCurrentInstance() as ComponentInternalInstance
let isShow = ref(false) // 显示 账号设置 页面
let useChat = useChatStore()
let currentIndex = ref('1')

const btn = async (item) => {
  let { id, label } = item
  let chatId = 0
  if (id == 1) {
    let res = await chatList({ type: item.id })
    useChat.menuList = res.data
    chatId = res.data[0].id
  }
  currentIndex.value = item.id
  router.push({
    path: label,
    query: { id: chatId }
  })
}

const login = () => {
  proxy.$showLoginDialog()
}
const loginOut = () => {
  userStore.removeUserInfo()
  router.push('/')
}
// 账号设置
const userConfig = () => {
  router.push('/userConfig')
  isShow.value = false
}
watch(
  () => window.location.href,
  async (newUrl, oldUrl) => {
    const urlParams = new URLSearchParams(window.location.search)
    const token = urlParams.get('token')
    useLogin(token)
  },
  { immediate: true }
)
// 测试通信功能代码
// import { ipcRenderer } from 'electron'
// const { ipcRenderer } = require('electron')

// 渲染进程给主进程发消息
// ipcRenderer.send('render-to-main', 'hello, main!')
// window.electron.ipcRenderer.send('render-to-main', 'hello,main!')
// 异步消息
// window.electron.ipcRenderer.invoke('getTime').then((time) => {
//   console.log('shijian:', time)
// })
window.electron.ipcRenderer.on('notify', (e, message) => {
  console.log('渲染进程接收到的消息:', message)
})
</script>

<style scoped lang="scss">
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  .left {
    width: 200px;
    height: 100vh;
    background-color: #fff;
    position: relative;
    z-index: 100;
  }
  .right {
    flex: 1;
    background-color: #f2f2f2;
  }
}
.menu-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  .menu-logo {
    width: 50px;
    height: 50px;
    margin-top: 25px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .menu-ai {
    width: 60px;
    height: 25px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 135px;
    height: 40px;
    margin-top: 18px;
    cursor: pointer;
    &.active {
      background: #f2f2f2;
      border-radius: 19px 19px 19px 19px;
    }
    img {
      width: 16px;
      height: 16px;
    }
    p {
      margin-left: 8px;
      color: #333;
      text-align: center;
    }
  }
}
.login {
  position: absolute;
  bottom: 20px;
  .loginList {
    position: absolute;
    top: -23px;
    left: 200px;
    width: 120px;
    height: 80px;
    background: #c90000;
    border-radius: 9px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .setting {
      cursor: pointer;
    }
    .exit {
      cursor: pointer;
    }
  }
}
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 38px;
  color: #fff;
  background-color: #c90000;
  border-radius: 19px 19px 19px 19px;
  img {
    width: 25px;
    height: 25px;
    border: 50%;
  }
  span {
    margin-left: 8px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 38px;
    font-style: normal;
    text-transform: none;
  }
}
</style>
